/**
 * function.css 
 * 功能样式，主要存放粒子级别且全站高度通用样式；
 * 
 * created by Oscar at 2017/02/21 08:47.
 * 
 */
@import "components/_base.scss";

.f_cb:after, .f_cbli li:after { display: block; clear: both; visibility: hidden; height: 0; overflow: hidden; content: "."; }
.f_cb, .f_cbli li { zoom: 1; }
.f_ib { display: inline-block; *display: inline; *zoom: 1; }
.f_dn { display: none; }
.f_db { display: block; }
.f_fl { float: left; }
.f_fr { float: right; }
.f_pr { position: relative; }
.f_prz { position: relative; zoom: 1; }
.f_oh { overflow: hidden; }
.f_ff0 { font-family: arial,\5b8b\4f53; }
.f_ff1 { font-family: "Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53; }
.f_fs1 { font-size: 12px; }
.f_fs2 { font-size: 14px; }
.f_fwn { font-weight: normal; }
.f_fw3 { font-weight: 300; }
.f_fw4 { font-weight: 400; }
.f_fwb { font-weight: bold; }
.f_tal { text-align: left; }
.f_tac { text-align: center; }
.f_tar { text-align: right; }
.f_taj { text-align: justify; text-justify: inter-ideograph; }
.f_vam, .f_vama * { vertical-align: middle; }
.f_wsn { word-wrap: normal; white-space: nowrap; }
.f_pre { overflow: hidden; text-align: left; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; }
.f_wwb { white-space: normal; word-wrap: break-word; word-break: break-all; }
.f_ti { overflow: hidden; text-indent: -30000px; }
.f_ti2 { text-indent: 2em; }
.f_lhn { line-height: normal; }
.f_tdu, .f_tdu:hover { text-decoration: underline; }
.f_tdn, .f_tdn:hover { text-decoration: none; }
.f_toe { overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis; }
.f_csp { cursor: pointer; }
.f_csd { cursor: default; }
.f_csh { cursor: help; }
.f_csm { cursor: move; }
.f_usn { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }

/*== 颜色 ==*/
.dark { color: $GreyColor2; }
.white { color: $WhiteColor; }
.red { color: $RedColor; }
.red2 { color: $RedColor1; }
.light-red { color: $RedColor2; }
.blue { color: $BlueColor; }
.light-blue { color: $BlueColor1; }
.green { color: $GreenColor; }
.light-green { color: $GreenColor1; }
.orange { color: $OrangeColor; }
.orange2 { color: $OrangeColor1; }
.light-orange { color: $OrangeColor2; }
.purple { color: $PurpleColor; }
.pink { color: $PinkColor; }
.pink2 { color: $PinkColor1; }
.brown { color: $BrownColor; }
.grey { color: $GreyColor; }
.light-grey { color: $GreyColor1; }
/*主色*/
.a-color{color: $PrimaryColor!important;}
/*辅色*/
.b-color{color: $SecondaryColor!important;}
/*标题文字*/
.af-color{color: $FontColor!important;}
/*主要文字*/
.bf-color{color: $FontColor1!important;}
/*弱化文字*/
.cf-color{color:$FontColor2!important;}
/*块状背景色*/
.block-bg{background: $BackgroundColor;}



/*间距*/
.mr5{margin-right: 5px}
.ml5{margin-left: 5px}
.mt5{margin-top: 5px}
.mb5{margin-bottom: 5px}
.pr5{padding-right: 5px}
.pl5{padding-left: 5px}
.pt5{padding-top: 5px}
.pb5{padding-bottom: 5px}

.mr10{margin-right: 10px}
.ml10{margin-left: 10px}
.mt10{margin-top: 10px}
.mb10{margin-bottom: 10px}
.pr10{padding-right: 10px}
.pl10{padding-left: 10px}
.pt10{padding-top: 10px}
.pb10{padding-bottom: 10px}

.mr20{margin-right: 20px}
.ml20{margin-left: 20px}
.mt20{margin-top: 20px}
.mb20{margin-bottom: 20px}
.pr20{padding-right: 20px}
.pl20{padding-left: 20px}
.pt20{padding-top: 20px}
.pb20{padding-bottom: 20px}

.mr30{margin-right: 30px}
.ml30{margin-left: 30px}
.mt30{margin-top: 30px}
.mb30{margin-bottom: 30px}
.pr30{padding-right: 30px}
.pl30{padding-left: 30px}
.pt30{padding-top: 30px}
.pb30{padding-bottom: 30px}
